<template>
  <div id="app">
    <!-- 固定在顶部 -->
    <div class="container fixed-top pt-4">
      <!-- 添加待办事项 -->
      <form class="input-group mb-3">
        <span class="input-group-text">Todo</span>
        <input type="text" class="form-control">
        <button class="btn btn-primary" type="submit">Add</button>
      </form>

      <!-- 筛选项 -->
      <div class="d-flex justify-content-between">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="flexCheck1">
          <label class="form-check-label" for="flexCheck1">
            Todo <span class="py-sm-1 px-sm-1 mx-1 border badge rounded bg-light text-dark border-dark">0</span>
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="flexCheck2">
          <label class="form-check-label" for="flexCheck2">
            In Progress <span class="py-sm-1 px-sm-1 mx-1 border badge rounded bg-warning border-warning">0</span>
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="flexCheck3">
          <label class="form-check-label" for="flexCheck3">
            Done <span class="py-sm-1 px-sm-1 mx-1 border badge rounded bg-success border-success">0</span>
          </label>
        </div>
      </div>
    </div>

    <div class="container pt-5">
      <!-- 任务列表 -->
      <ul class="list-group">
        <todo-item></todo-item>
      </ul>
    </div>

    <!-- 模态框 -->
    <div class="container">
      <modal-dialog data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true" id="myModal" />
    </div>

  </div>
</template>

<script>
import { Modal } from "bootstrap"
import TodoItem from './components/TodoItem'
import ModalDialog from './components/ModalDialog'

export default {
  name: 'App',
  components: {
    TodoItem,
    ModalDialog
  },
  data() {
    return {
      myModal: null
    }
  },
  mounted() {
    this.myModal = new Modal(document.getElementById('myModal'));
    // this.myModal.show()
  }
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  margin-top: 80px;
}

*, ::after, ::before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.pointer {
  cursor: pointer;
}

.form-control:focus, .form-check-input:focus {
  box-shadow: none !important;
  border-color: #ced4da !important;
}

.fixed-top {
  background: #fff;
}
</style>
